import React, { Component } from 'react';
import '../css/Comment.less';
import {observer} from "mobx-react";
import  Mobx from  '../mobx'
import axios from  'axios'
@observer class Comment extends Component {
    constructor(props) {
        super(props)
        this.state={
            CommentSum:1000,
            input:'',
            array:[],
            total:0
        }
    }
    componentWillMount(){
        Mobx.loading=true
    }
    componentWillReceiveProps(){
        if(!this.props.id){
            return false
        }
        if(!Mobx.loading){
            return false;
        }
        axios.get('http://www.niuduxiu.com/pc/comment/pageQuery.jhtml?id='+this.props.id+'&type=0&pageSize=10&pageNumber=1&userId='+Mobx.zhanghao)
            .then((item)=>{
                this.setState({
                    array:item.data.data,
                    total:item.data.comment_count
                })
            })
        Mobx.loading=false
    }
    changeInput(event){
        this.setState({
            input:event.target.value
        },()=>{
            this.setState({
                CommentSum:1000-this.state.input.length
            })
        })
    }
    render() {
        return (
            <div className="Comment">
                <div>
                    <p className='CommentSum'>
                        评论（{this.state.total}）
                    </p>
                    <div className='CommentTextarea'>
                        <textarea value={this.state.input} onChange={this.changeInput.bind(this)} placeholder='请输入您的评论内容'></textarea>
                        <p>{this.state.CommentSum}</p>
                    </div>
                    <p className='button'>
                        <span>提交</span>
                    </p>
                    <div className="CommentArray">
                        {
                            this.state.array.map((item,index)=>{
                                return(
                                    <div className='CommentArrayOne' key={index}>
                                        <div className='left'>
                                            <img src={item.head_pic} alt=""/>
                                        </div>
                                        <div  className='right shengluehao'>
                                            <p className='title shengluehao'>{item.username}</p>
                                            <p className='content'>{item.commentTime}</p>
                                            <p className='message'>{item.messageContent}</p>
                                            <p className='caozuo'>
                                                <span>
                                                    <img src={require('../img/zan.png')} alt="" style={{display:item.isThumbup?'none':'inline'}} />
                                                     <img src={require('../img/zanActive.png')} alt="" style={{display:item.isThumbup?'inline':'none',width:'auto',marginRight:"1vw"}} />
                                                    {item.thumbupCount}
                                                </span>
                                            </p>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <p className='noMore'>没有更多了。。</p>
                </div>
            </div>
        );
    }
}

export default Comment;
